<template>
    <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
            <el-card>
                <div slot="header">
                    用户
                </div>
                <h3><i class="fa fa-user"></i>{{countData.user}}</h3>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div slot="header">
                    文章
                </div>
                <h3><i class="fa fa-file"></i>{{countData.article}}</h3>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <div slot="header">
                    评论
                </div>
                <h3><i class="fa fa-comment"></i>{{countData.comment}}</h3>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
    export default{
        data(){
            return{
                countData:{user:0,article:0,comment:0}
            }
        },
        created(){
            window.axios.get('api/countall').then((res)=>{
                this.countData=res.data;
            })
        }
    }
</script>
<style lang="scss" scoped>
    .row-bg{
        margin-top: 20px;
    }
    h3 i{
        margin-right:20px;
    }
</style>